<template>
    <div style="display: flex;width: 100%;height: 650px;">
        <div style="width: 200px;border-right: 1px solid rgb(102 102 102 / 24%);">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
        <div style="width: 700px;">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                @selection-change="handleSelectionChange" max-height="580px">
                <el-table-column type="selection" width="55" />
                <el-table-column label="图片" width="120">
                    <template #default="scope">
                        <img v-if="scope.row.photo.length > 0" :src="scope.row.photo[0]" alt=""
                            style="width: 80px; height: 80px">
                    </template>
                </el-table-column>
                <el-table-column property="name" label="名称" width="120" />
                <el-table-column property="merchandiseInventory" label="库存" />
                <el-table-column property="sellingPrice" label="价格" />
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </div>
    </div>
    <div style="display: flex;align-items: center;margin-left: auto;">
        <span style="margin-left: auto;">
            <el-button @click="closeData">取消</el-button>
            <el-button type="primary" @click="matchingProductsOK">
                确认
            </el-button>
        </span>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { classificationList, getProductList } from '@/api/goods.js'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
const props = defineProps({
    rowData: {
        type: Array,
        default: () => ([]), // 默认值为一个空对象
    },
})
const emit = defineEmits(['matchingProductsOK', 'matchingProductsClose'])

const page = reactive({
    type: "",
    pageNum: 1,
    pageSize: 10,
    isList: 0
})
const total = ref(0)
const type = ref('')
// 树结构
const handleNodeClick = (data) => {
    type.value = data.name
    getListData()
}
const data = ref([])

const defaultProps = ref({
    children: 'children',
    label: 'name',
    value: 'name'
})
// 表格数据
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getListData()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    getListData()
}
// 确认
const matchingProductsOK = () => {
    emit('matchingProductsOK', multipleSelection.value)
}
// 关闭
const closeData = () => {
    emit('matchingProductsClose')
}

const tableData = ref([])

const getclassificationList = async () => {
    let par = {
        name: '',
        pageNum: 1,
        pageSize: 100
    }
    const res = await classificationList(par)
    data.value = res.data
}
const getListData = async () => {
    tableData.value = []
    total.value = 0
    let par = {
        ...page,
        type: type.value,
    }
    let res = await getProductList(par)
    tableData.value = res.data.records
    total.value = res.data.total
}
onMounted(async () => {
    await getclassificationList()
    await getListData()
    if (props.rowData.length > 0) {
        multipleSelection.value = props.rowData
        tableData.value.forEach(row => {
            const shouldSelect = props.rowData.some(
                item => {
                    if (row.id == item.id) {
                        return row
                    }
                }
            )
            multipleTableRef.value.toggleRowSelection(row, shouldSelect)
        })
    }

})
</script>

<style lang="scss" scoped></style>